<template>
    <div class='wrapper'>
        <div class="inner">
            <div class='chart' id='chart' v-show="this.ok"></div>
            <div class="btm">
                <p class="loadok">加载完成，点击登录</p>
                <van-button round plain hairline type="info" class="btn" @click="this.tomybook">进入我的图书</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    let echarts = require('echarts/lib/echarts');
    import 'echarts-liquidfill'
    export default {
        name: "Test2",
        data() {
            return {
                load:[0.1],
                chart:{},
                ok:true
            }
        },
        mounted() {
            this.drawChart();
            this.loading();
        },
        methods: {
            drawChart() {
                // 基于准备好的dom，初始化echarts实例
                this.chart = echarts.init(document.getElementById('chart'))
                // 监听屏幕变化自动缩放图表
                window.addEventListener('resize', function () {
                    this.chart.resize()
                });

                // 绘制图表
                this.chart.setOption({
                    // 图表主标题
                    title: {
                        text: '加载中', // 主标题文本，支持使用 \n 换行
                        top: 140, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                        left: 'center', // 值: 'left', 'center', 'right' 同上
                        // center: 'center',
                        textStyle: { // 文本样式
                            fontSize: 20,
                            fontWeight: 600,
                            color: '#fff',
                            // position: 'relative',
                            top: 50,
                            // textAlign:"center",
                            // padding:'111px',
                            // position:'fixed',
                            // left: '300px'
                        }
                    },
                    // 提示框组件
                    tooltip: {
                        trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                        textStyle: {
                            color: '#fff' // 文字颜色
                        },

                        formatter: function (value) {
                            return value.seriesName + ':' + value.data * 100 + '%'
                        }
                    },
                    series: [{
                        type: 'liquidFill',
                        name: '加载中', // 系列名称，用于tooltip的显示，legend 的图例筛选
                        radius: '62%', // 水球图的半径
                        // left:"center",
                        center: ['50%', '63%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                        // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
                        // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
                        shape: 'circle',
                        phase: 0, // 波的相位弧度 不设置  默认自动
                        direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
                        outline: {
                            show: true,
                            borderDistance: 0, // 边框线与图表的距离 数字
                            itemStyle: {
                                opacity: 1, // 边框的透明度   默认为 1
                                borderWidth: 1, // 边框的宽度
                                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                                shadowColor: '#fff', // 边框的阴影颜色,
                                borderColor: '#41dcd8' // 边框颜色
                            }
                        },
                        // 图形样式
                        itemStyle: {
                            color: '#4077eb', // 水球显示的背景颜色
                            opacity: 0.5, // 波浪的透明度
                            shadowBlur: 10 // 波浪的阴影范围
                        },
                        backgroundStyle: {
                            color: '#407bf3', // 水球未到的背景颜色
                            opacity: 0.5
                        },
                        // 图形的高亮样式
                        emphasis: {
                            itemStyle: {
                                opacity: 0.8 // 鼠标经过波浪颜色的透明度
                            }
                        },
                        // 图形上的文本标签
                        label: {
                            fontSize: 55,
                            fontWeight: 400,
                            color: '#fff'
                        },
                        data: this.load // 系列中的数据内容数组
                    }]
                },true)
            },
            loading(){
                    let mytimer = window.setInterval(()=>{
                        if(this.load[0] <= 1.0) {
                            this.load[0] += 0.1;
                            this.drawChart();
                            // console.log(this.load[0])
                                }
                        if(Math.abs(this.load[0]-1)<=0.01){
                            console.log(this.load[0]);
                            clearInterval(mytimer);
                            setTimeout(()=>{
                                this.ok = !this.ok
                            },800)
                        }
                    },100)
                },
            tomybook(){
                this.$router.push('/login')
            }
            }
        }
</script>

<style scoped>
    .wrapper {
        /*width: 100%;*/
        /*height: 100%;*/
        height: 100%;
        width: 100%;
        position: fixed;
    }
    .wrapper .inner {
        /*position: relative;*/
        /*width: 50%;*/
        /*height: 500px;*/
        /*!*border: 1px solid #eeeeee;*!*/
        /*margin: 100px 50px 0;*/
        /*background: url(../../assets/imgs/3.jpg) no-repeat;*/
        /*background-size: 100% 100%;*/
        height: 100%;
        width: 100%;
        background-image: url("../../assets/imgs/3.jpg");
        background-size: 100% 100%;
        background-attachment: fixed;
        background-repeat:no-repeat;
        position: absolute;
        /*animation-duration: 2s;*/
    }
    .wrapper .inner .chart {
        width: 100%;
        height: 100%;
        /*background: url(../../assets/imgs/2.jpg) no-repeat center bottom;*/
        background-size: 80% 80%;
        margin: 10px 10px 0;
        text-align: center;
    }
    .wrapper .inner .btm {
        width: 50vw;
        height: 80vh;
        /*background: url(../../assets/imgs/1.jpg) no-repeat;*/
        background-size: 100% 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
    }
    .btm .btn{

    }
    .loadok{
        text-align: center;
        padding-bottom: 55vh;
        position: relative;
        top: 20vh;
        color: white;
        font-size: 1.1em;
        font-weight: 600;
    }
</style>